<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<h2 mat-dialog-title>FlowFile</h2>
<div class="flowfile">
    <mat-tab-group [(selectedIndex)]="selectedIndex" (selectedIndexChange)="tabChanged($event)">
        <mat-tab label="Details">
            <mat-dialog-content>
                <div class="dialog-tab-content">
                    <div class="flex gap-x-4">
                        <div class="w-1/2 pr-2 flex flex-col gap-y-3">
                            <div class="flex flex-col">
                                <div class="font-bold primary-color">FlowFile Details</div>
                            </div>
                            <div class="flex flex-col">
                                <div>UUID</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatCopyableValue;
                                        context: { $implicit: request.flowfile.uuid, title: request.flowfile.uuid }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Filename</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatValue;
                                        context: {
                                            $implicit: request.flowfile.filename,
                                            title: request.flowfile.filename
                                        }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>File Size</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatValue;
                                        context: {
                                            $implicit: request.flowfile.size,
                                            title: request.flowfile.size + ' bytes'
                                        }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Queue Position</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatValue;
                                        context: {
                                            $implicit: request.flowfile.position,
                                            title: request.flowfile.position
                                        }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Queued Duration</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatDuration;
                                        context: { $implicit: request.flowfile.queuedDuration }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Lineage Duration</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatDuration;
                                        context: { $implicit: request.flowfile.lineageDuration }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Penalized</div>
                                <div class="tertiary-color font-medium">
                                    {{ request.flowfile.penalized ? 'Yes' : 'No' }}
                                </div>
                            </div>
                            <ng-container *ngIf="request.flowfile.clusterNodeId">
                                <div class="flex flex-col">
                                    <div>Node Address</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatValue;
                                            context: {
                                                $implicit: request.flowfile.clusterNodeAddress,
                                                title: request.flowfile.clusterNodeAddress
                                            }
                                        "></ng-container>
                                </div>
                            </ng-container>
                            <ng-template #formatDuration let-duration>
                                <ng-container *ngIf="duration != null; else noDuration">
                                    <div class="tertiary-color font-medium">
                                        {{ formatDurationValue(duration) }}
                                    </div>
                                </ng-container>
                                <ng-template #noDuration>
                                    <div class="unset neutral-color">No value set</div>
                                </ng-template>
                            </ng-template>
                        </div>
                        <div class="w-1/2 pl-2 flex flex-col gap-y-3">
                            <div class="flex flex-col">
                                <div class="font-bold primary-color">Content Claim</div>
                            </div>
                            <div
                                class="flex flex-col gap-y-3"
                                *ngIf="request.flowfile.contentClaimContainer != null; else noContent">
                                <div>
                                    <div>Container</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatContentValue;
                                            context: {
                                                $implicit: request.flowfile.contentClaimContainer,
                                                title: request.flowfile.contentClaimContainer
                                            }
                                        "></ng-container>
                                </div>
                                <div>
                                    <div>Section</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatContentValue;
                                            context: {
                                                $implicit: request.flowfile.contentClaimSection,
                                                title: request.flowfile.contentClaimSection
                                            }
                                        "></ng-container>
                                </div>
                                <div>
                                    <div>Identifier</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatCopyableContentValue;
                                            context: {
                                                $implicit: request.flowfile.contentClaimIdentifier,
                                                title: request.flowfile.contentClaimIdentifier
                                            }
                                        "></ng-container>
                                </div>
                                <div>
                                    <div>Offset</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatContentValue;
                                            context: {
                                                $implicit: request.flowfile.contentClaimOffset,
                                                title: request.flowfile.contentClaimOffset
                                            }
                                        "></ng-container>
                                </div>
                                <div>
                                    <div>Size</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatContentValue;
                                            context: {
                                                $implicit: request.flowfile.contentClaimFileSize,
                                                title: request.flowfile.contentClaimFileSizeBytes + ' bytes'
                                            }
                                        "></ng-container>
                                </div>
                                <div class="flex">
                                    <button mat-stroked-button (click)="downloadContentClicked()">
                                        <i class="fa fa-download"></i>
                                        Download
                                    </button>
                                    <button
                                        *ngIf="contentViewerAvailable"
                                        class="ml-3"
                                        mat-stroked-button
                                        (click)="viewContentClicked()">
                                        <i class="fa fa-eye"></i>
                                        View
                                    </button>
                                </div>
                            </div>
                            <ng-template #noContent>
                                <div class="unset neutral-color">No Content Available</div>
                            </ng-template>
                        </div>
                    </div>
                </div>
            </mat-dialog-content>
        </mat-tab>
        <mat-tab label="Attributes">
            <mat-dialog-content>
                <div class="dialog-tab-content">
                    <div class="flex flex-col gap-y-4">
                        <div class="flex">
                            <div class="font-bold primary-color">Attribute Values</div>
                        </div>
                        <div class="flex flex-col">
                            <div *ngFor="let attribute of request.flowfile.attributes | keyvalue">
                                <div class="mb-4 flex flex-col">
                                    <div>{{ attribute.key }}</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatValue;
                                            context: { $implicit: attribute.value, title: attribute.value }
                                        "></ng-container>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </mat-dialog-content>
        </mat-tab>
    </mat-tab-group>
    <ng-template #formatValue let-value let-title="title">
        <ng-container *ngIf="value != null; else nullValue">
            <ng-container *ngIf="value === ''; else nonEmptyValue">
                <div class="unset neutral-color">Empty string set</div>
            </ng-container>
            <ng-template #nonEmptyValue>
                <div class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                    {{ value }}
                </div>
                <ng-template #valueWithTitle>
                    <div class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
                </ng-template>
            </ng-template>
        </ng-container>
        <ng-template #nullValue>
            <div class="unset neutral-color">No value set</div>
        </ng-template>
    </ng-template>
    <ng-template #formatCopyableValue let-value let-title="title">
        <ng-container *ngIf="value != null; else nullValue">
            <ng-container *ngIf="value === ''; else nonEmptyValue">
                <div class="unset neutral-color">Empty string set</div>
            </ng-container>
            <ng-template #nonEmptyValue>
                <div [copy]="value" class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                    {{ value }}
                </div>
                <ng-template #valueWithTitle>
                    <div [copy]="value" class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
                </ng-template>
            </ng-template>
        </ng-container>
        <ng-template #nullValue>
            <div class="unset neutral-color">No value set</div>
        </ng-template>
    </ng-template>

    <ng-template #formatContentValue let-value let-title="title">
        <ng-container *ngIf="value != null; else nullValue">
            <div class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                {{ value }}
            </div>
            <ng-template #valueWithTitle>
                <div class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
            </ng-template>
        </ng-container>
        <ng-template #nullValue>
            <div class="unset neutral-color">No value previously set</div>
        </ng-template>
    </ng-template>
    <ng-template #formatCopyableContentValue let-value let-title="title">
        <ng-container *ngIf="value != null; else nullValue">
            <div [copy]="value" class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                {{ value }}
            </div>
            <ng-template #valueWithTitle>
                <div [copy]="value" class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
            </ng-template>
        </ng-container>
        <ng-template #nullValue>
            <div class="unset neutral-color">No value previously set</div>
        </ng-template>
    </ng-template>
    <mat-dialog-actions align="end">
        <button mat-flat-button mat-dialog-close>Ok</button>
    </mat-dialog-actions>
</div>
